<template>
    <div class="login-wrap">
        <div class="pic">
            <img src="../../assets/img/box1.png" alt />
        </div>
        <div class="ms-login">
            <div class="back"></div>
            <el-form class="cont" :model="param" :rules="rules" ref="regist" label-width="0px">
                <div class="tit">欢迎注册</div>
                <el-steps
                    :active="active"
                    align-center
                    finish-status="success"
                    style="width:552px;margin-left:40px;margin-top:30px"
                >
                    <el-step title="账号注册"></el-step>
                    <el-step title="基本信息"></el-step>
                    <el-step title="营业执照"></el-step>
                    <el-step title="注册成功"></el-step>
                </el-steps>
                <div class="content1" v-show="show1">
                    <div class="zhanghao">
                        <span>用户名：</span>
                        <el-form-item class="example1" prop="username">
                            <el-input class="example" v-model="param.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                    </div>
                    <div class="zhanghao">
                        <span>密码:</span>
                        <el-form-item class="example1" prop="password">
                            <el-input class="example" type="password" v-model="param.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                    </div>
                    <div class="zhanghao">
                        <span>确认密码:</span>
                        <el-form-item class="example1" prop="password1">
                            <el-input
                                class="example"
                                type="password"
                                v-model="param.password1"
                                placeholder="请再次输入密码"
                            ></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="content2" v-show="show2">
                    <div class="zhanghao1">
                        <span>企业全称：</span>
                        <el-form-item class="example2" prop="name">
                            <el-input class="name" v-model="param.name" placeholder="请输入企业名称"></el-input>
                        </el-form-item>
                    </div>
                    <div class="zhanghao1">
                        <span>企业身份证号：</span>
                        <el-form-item class="example2" prop="principal_card">
                            <el-input
                                class="principal_card"
                                v-model="param.principal_card"
                                placeholder="请输入企业身份证号"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="zhanghao1">
                        <span>企业简称：</span>
                        <el-form-item class="example2" prop="abbreviation">
                            <el-input
                                class="abbreviation"
                                v-model="param.abbreviation"
                                placeholder="请输入企业简称"
                            ></el-input>
                        </el-form-item>
                    </div>

                    <div class="zhanghao1">
                        <span>联系电话：</span>
                        <el-form-item class="example2" prop="principal_phone">
                            <el-input
                                class="principal_phone"
                                v-model="param.principal_phone"
                                placeholder="请输入联系电话"
                            ></el-input>
                        </el-form-item>
                    </div>

                    <div class="zhanghao1">
                        <span>企业负责人：</span>
                        <el-form-item class="example2" prop="principal">
                            <el-input
                                class="principal"
                                v-model="param.principal"
                                placeholder="请输入企业负责人"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="zhanghao1">
                        <span>邮箱：</span>
                        <el-form-item class="example2" prop="email">
                            <el-input class="email" v-model="param.email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                    </div>
                    <div class="zhanghao1">
                        <span>地址：</span>
                        <el-form-item class="example2" prop="address">
                            <el-input class="address" v-model="param.address" placeholder="请输入地址"></el-input>
                        </el-form-item>
                    </div>
                    <div class="zhanghao1 shijian">
                        <span style="width:70px">注册时间:</span>
                        
                        <div class="block">
                            <span class="demonstration"></span>
                            <el-date-picker
                                v-model="param.register_time"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期"
                            ></el-date-picker>
                        </div>
                    </div>
                </div>
                <div class="content3" v-show="show3">
                    <div class="shangc">
                        <span>上传营业执照:</span>
                        <el-upload
                            v-model="param.license"
                            class="avatar-uploader"
                            action="http://192.168.1.106:8891/company/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
                <div class="content4" v-show="show4">
                    <img src="../../assets/img/cg.png" alt />
                </div>

                <el-button
                    style="margin-top: 30px;margin-left:230px;width:183px;height:54px;background:rgba(100,140,253,1);border-radius:5px;font-size:16px;font-weight:bold;color:rgba(255,255,255,1);line-height:34px;"
                    @click="next"
                >{{anniu}}</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
import ajax from '@/utils/myajax';
import Axios from 'axios';
export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            anniu: '下一步',
            imageUrl: '',
            show1: true,
            show2: false,
            show3: false,
            show4: false,
            active: 1,
            
            param: {
                username: '',
                password: '',
                password1:'',
                name: '',
                principal_card: '',
                abbreviation: '',
                principal_phone: '',
                principal: '',
                license: '',
                register_time: '',
                email: '',
                address: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                name: [{ required: true, message: '请输入企业名', trigger: 'blur' }],
                email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                principal_card: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
                abbreviation: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
                address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
                password1: [{ required: true, message: '请确认密码', trigger: 'blur' }],
                principal: [{ required: true, message: '请输入负责人名字', trigger: 'blur' }]
            }
        };
    },

    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            // this.$message(res);
            this.param.license = res;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        next() {
            // this.active++;
            
            if(this.param.username==''||this.param.password==''||this.param.password1==''){
                this.active=1;
                this.$message({
                           message: '请输入完整信息',  
                        });
            }else{
                if(this.param.password!=this.param.password1){
                  this.$message({
                           message: '两次密码不一致',  
                        });
                  this.active=1;
                }else{
                    this.active=2;
                    if (this.active == 2) {
                        this.show1 = false;
                        this.show2 = true;
                        this.show3 = false;
                        this.show4 = false;
                        if(this.param.name==''||this.param.principal_phone==''||this.param.email==''||this.param.principal_card==''||this.param.abbreviation==''||this.param.address==''||this.param.principal==''||this.param.register_time==''){
                            this.$message({
                           message: '请输入完整信息',  
                        });
                        }else{
                                this.active=3;
                                if (this.active == 3) {
                                this.show1 = false;
                                this.show2 = false;
                                this.show3 = true;
                                this.show4 = false;
                                this.anniu = '提交';
                                if(this.param.license==''){
                                    this.$message({
                                        message: '请上传营业执照',  
                                        });
                                }else{
                                    this.active=4;
                                    if (this.active == 4) {
                                        this.show1 = false;
                                        this.show2 = false;
                                        this.show3 = false;
                                        this.show4 = true;
                                        this.anniu = '返回登录';
                                        this.$refs['regist'].validate(valid => {
                                            if (valid) {
                                               let me=this
                                                ajax('/company/add_company', this.param, function(data) {
                                                            me.$message({
                                                            message: '注册成功并跳转登录页',  
                                                            });
                                                        me.$router.push('/login' );
                                                                    

                                                            

                                                });
                                            }
                                        });
                                        // me.active++;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
            
           
            
            console.log(this.active);
        }
    }
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
}
.pic {
    width: 1743px;
    height: 581px;
    position: absolute;
    left: 177px;
}
.ms-login {
    width: 1536px;
    height: 714px;
    position: absolute;
    left: 192px;
    top: 123px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 29px 2px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
}
.back {
    width: 544px;
    height: 520px;
    background: url(../../assets/img/box.png) no-repeat;
    float: left;
    margin-left: 103px;
    margin-top: 73px;
}
.cont {
    position: relative;
    float: right;
    width: 632px;
    height: 714px;
    margin-right: 81px;
    background: rgba(255, 255, 255, 1);
    /* background: rgb(115, 92, 138); */
}
.tit {
    width: 100%;
    height: 28px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    line-height: 28px;
    opacity: 0.85;
    text-align: center;
    margin-top: 49px;
}
.content1 {
    width: 100%;
    height: 400px;
    padding-left: 10px;
}
.zhanghao {
    float: left;
    width: 500px;
    height: 40px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    line-height: 40px;
    opacity: 0.6;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    margin: 60px 0 20px 50px;
}
.zhanghao span {
    display: block;
    margin-left: 10px;
    height: 40px;
    width: 110px;
    line-height: 40px;
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
    float: left;
    opacity: 0.85;
}
.example1 >>> .el-input__inner {
    float: left;
    height: 40px;
    width: 300px;
    border: none;
    outline: none;
    font-size: 16px;
}
.example1 >>> .el-input--small {
    width: 300px;
}

.content2 {
    width: 100%;
    height: 400px;
    /* background: rgb(149, 70, 156); */
}

.zhanghao1 {
    float: left;
    width: 300px;
    height: 40px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    line-height: 40px;
    opacity: 0.6;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    margin-left: 10px;
    margin-top: 30px;
}
.shijian {
    border: none;
}
.shijian span {
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.shijian .block {
    float: left;
    width: 115px;
    height: 42px;
}
.shijian >>> .demonstration {
    display: none;
}

.zhanghao1 span {
    display: block;
    margin-left: 10px;
    height: 40px;
    width: 110px;
    line-height: 40px;
    font-size: 15px;
    color: rgba(0, 0, 0, 1);
    float: left;
    opacity: 0.85;
}
.shijian span {
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-left: 0px;
}

.example2 >>> .el-input__inner {
    float: left;
    height: 40px;
    width: 180px;
    border: none;
    outline: none;
    font-size: 16px;
}
.example2 >>> .el-input--small {
    width: 180px;
    /* border:none;
      outline: none; */
}
.shijian >>> .el-input__inner {
    margin-left: 10px;
    height: 40px;
}
.shangc {
    margin-left: 220px;
    padding-top: 50px;
    width: 230px;
    height: 90px;
    /* background: #409EFF; */
}
.shangc span {
    display: block;
    width: 100px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 40px;
    opacity: 0.6;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    margin-left: 40px;
    margin-bottom: 10px;
}
.avatar-uploader {
    height: 40px;
}
.avatar-uploader >>> .el-upload--text {
    width: 200px;
    height: 200px;
    position: relative;
    float: left;
}
.avatar-uploader >>> .avatar-uploader-icon {
    float: left;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    left: 70px;
}
/* .avatar-uploader>>>.el-icon-plus:before{
    
    
} */

.content3 {
    width: 100%;
    height: 400px;
    /* background: rgb(138, 171, 214); */
}
.content4 {
    width: 100%;
    height: 400px;
    background: rgb(157, 170, 158);
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>